<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button-group>
                <goBack></goBack>
                <el-button type="primary" @click="handleAdd">
                    点击重新上传
                </el-button>
            </el-button-group>
            <el-table :data="shujuList" stripe style="width: 100%" highlight-current-row>
                <el-table-column type="index" min-width="100">
                </el-table-column>
                <el-table-column prop="name" label="文件名">
                    <template slot-scope="scope">
                        <div class="firedownload" @click="fileDownload(scope.row)">{{scope.row.name}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="上传时间">

                </el-table-column>
                <!-- <el-table-column label="操作" min-width="200">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="handleGenerate(scope.$index, scope.row)">
                            生成文档
                        </el-button>
                    </template>
                </el-table-column>-->
            </el-table> 
        </el-col>

        <el-col :span="24">
            <el-card class="box-card">
                <div slot="header" class="clearfix subtab_tit">
                    <span>验证原始数据文档</span>
                </div>
                <el-table :data="historyList" style="width: 100%" stripe highlight-current-row>
                    <el-table-column type="index" min-width="100">
                    </el-table-column>
                    <el-table-column prop="name" label="文件名">
                        <template slot-scope="scope">
                            <div class="firedownload" @click="fileDownload(scope.row)">{{scope.row.name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="上传时间">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="130">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="handleDel(scope.$index, scope.row)" icon="el-icon-delete" size="small" type="danger"> </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-card>
        </el-col>

        <el-dialog title="文件上传" :visible.sync="isUploadShow" :close-on-click-modal="false">
            <div class="inner">
                <el-upload ref="elupload" class="upload" drag :action="importFileUrl" :data="upLoadData" :limit="1" :headers="httpHeaders" :auto-upload="false" :beforeUpload="beforeAvatarUpload" :onSuccess="uploadSuccess">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或
                        <em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                        <el-button @click="uploadAction" slot="tip" type="primary">上传</el-button>
                        <p>只能上传txt格式文件</p>
                    </div>
                </el-upload>
            </div>
        </el-dialog>
    </section>
</template>
<script>
import NProgress from "nprogress";
import { getToken } from "@/utils/auth";
import goBack from "@/components/public/goback";
export default {
  components: {
    goBack
  },
  data() {
    return {
      shujuList: [],
      historyList: [],
      isUploadShow: false,
      httpHeaders: {
        Authorization: getToken()
      },
      importFileUrl: "/files/upload",
      upLoadData: {
        projectid: this.$route.params.projectid,
        type: 6
      }
    };
  },
  methods: {
   
    uploadAction() {
      this.$confirm("确认提交吗？", "提示", {})
        .then(() => {
          this.$refs.elupload.submit();
        })
        .catch(e => {});
    },
    //文件下载
    fileDownload(row) {
      window.open("/" + row.dir);
    },

    //验证原始数据文档列表
    getshujuList() {
      this.listLoading = true;
      NProgress.start();
      this.axios
        .get("/projects/" + this.$route.params.projectid, {
          params: {}
        })
        .then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            if (reply.data.data.shujufileObject != null) {
              // debugger;
              let shujufileJSON = reply.data.data.shujufileObject;
              this.shujuList = [];
              this.shujuList.push(shujufileJSON.file);
              this.historyList = shujufileJSON.list;
            }
          } else {
            this.$message({
              message: `查询出错8，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
    },
    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该历史文件吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        NProgress.start();
        let params = {
          projectid: this.$route.params.projectid,
          uuid: row.uuid
        };
        this.axios.post("/files/delete", params).then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success"
            });
            this.getshujuList();
          } else {
            this.$message({
              message: `删除失败，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
      });
    },
    //上传对话框显示
    handleAdd() {
      this.isUploadShow = true;
    },
    //文件检查
    beforeAvatarUpload(file) {
      const extension = file.name.split(".")[1] === "txt";

      if (!extension) {
        this.$message({
          message: "上传模板只能是txt格式!",
          type: "warning"
        });
      }
      return extension;
    },

    uploadSuccess(response, file, fileList) {
      this.uploading = false;
      if (response.status == 0) {
        this.$refs.elupload.clearFiles();
        this.isUploadShow = false;
        this.getshujuList();
        this.$notify({
          type: "success",
          message: "文件上传成功",
          offset: 40
        });
      } else {
        return this.$message({ type: "error", message: "上传失败" });
      }
    },
    handleGenerate(index, row) {
      this.$confirm("确认生成word文档吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        NProgress.start();
        let params = {
          projectid: this.$route.params.projectid,
          uuid: row.uuid
        };
        this.axios.post("/analysis/start", params).then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            this.$confirm("生成成功! 确定现在下载？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                   window.open("/uploads/" + row.uuid +".docx");
                this.$message({
                  type: "success",
                  message: "下载成功!"
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消下载"
                });
              });
          } else {
            this.$message({
              message: `生成失败，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
      });
    }
  },
  mounted() {
    this.getshujuList();
  }
};
</script>
 <style lang="scss" scoped>
.subtable thead {
  color: #909399;
  font-weight: 500;
}
.subtable td,
.subtable th .is-leaf {
  border-bottom: 1px solid #ebeef5;
}
.subtable th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}
.cell a {
  text-decoration: none;
  color: #409eff;
}
</style>

